<template>
  <uni-nav-bar left-icon="left" fixed title="司机排班" @clickLeft="onClickScreen" />

  <view class="driver-container" :style="{ height: containerHeight + 'px' }">
    <view style="height: 15px"></view>
    <view class="table-box" :style="{ height: tableBoxHeight + 'px' }">
      <qc-table :columns="columns" :data="tableData" @scrolltolower="onScrollBottom" :padding="false">
        <template #titleSlot="{ column }">
          <view class="table-padding-box column-item" :class="column.week == '今天' ? 'blue-bg' : ''">
            <view>{{ column.title }}</view>
            <view>{{ column.week }}</view>
          </view>
        </template>

        <template #staffName="{ record }">
          <view>{{ record.staffName }}</view>
          <view class="gray">{{ record.staffPostName }}</view>
          <ve-tag class="tag" :color="getStatusNameColor(record)" :background="getStatusNameBg(record)" plain :title="record.statusName" />
        </template>

        <template #siteInfoList="{ record }">
          <view class="site-info-scroll">
            {{ record.siteInfoList[0] ?? '-' }}
            <view v-if="record.siteInfoList.length >= 2">
              <view class="site-info-tag" @click="() => onClickAuthor(record)"> +{{ record.siteInfoList.length - 1 }} </view>
            </view>
          </view>
        </template>

        <template #ordersTotal="{ record }">
          <view class="table-padding-box">
            <template v-for="item in record.ordersTotal" :key="item">
              <view class="table-order-item table--line">{{ item }}</view>
            </template>
          </view>
        </template>

        <template v-for="day in days" #[day.title]="{ record }" :key="day">
          <view class="table-padding-box">
            <template v-for="item in record[day.title]" :key="item.title">
              <view
                @click="() => onClickDay(item)"
                class="day-number table-order-item table--line"
                :class="{ 'gray-bg': item?.value == 0 }"
              >
                {{ item?.label }} - {{ item?.value }}
              </view>
            </template>
          </view>
        </template>
      </qc-table>
    </view>

    <DragButton
      @click="onClickScreen"
      :style="{
        background: 'linear-gradient(360deg, #fff 0%, #fff 100%)',
        'box-shadow': '0px 4px 10px 0px rgba(0,0,0,0.3)',
        color: '#191F24',
      }"
      :isLandScape="true"
    >
      <view class="float-btn">
        <ve-icon name="screen-orientation" size="38" />
        <view>{{ screenTitle }}</view>
      </view>
    </DragButton>
  </view>

  <!-- 机构权限 -->
  <author-dialog ref="authorDialogRef" />
  <!-- 交还换车 -->
  <carorder-dialog ref="carorderDialogRef" />
</template>

<script setup lang="ts">
  import DragButton from '@/components/drag-button.vue'
  import qcTable from '../driver-schedule/components/qc-table.vue'
  import authorDialog from '../driver-schedule/dialog/author-dialog.vue'
  import carorderDialog from '../driver-schedule/dialog/carorder-dialog.vue'

  import { ref, onMounted } from 'vue'
  import useList from '@/hooks/useList'
  import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'

  const authorDialogRef = ref()
  const carorderDialogRef = ref()
  const screenTitle = ref('竖屏')

  let columns = [
    {
      title: '员工姓名',
      dataIndex: 'staffName',
      slotName: 'staffName',
      align: 'center',
      width: '120px',
    },
    {
      title: '归属门店',
      dataIndex: 'siteInfoList',
      slotName: 'siteInfoList',
      align: 'center',
      width: '100px',
    },
    {
      title: '数据汇总',
      dataIndex: 'ordersTotal',
      slotName: 'ordersTotal',
      align: 'center',
      width: '100px',
      nopadding: true,
    },
  ]

  const tableData = ref<any[]>([])

  const getStatusNameColor = (record: any) => {
    switch (record.status) {
      case 1:
        return '#165DFF'
      case 2:
      case 0:
        return '#8491A8'
    }
  }

  const getStatusNameBg = (record: any) => {
    switch (record.status) {
      case 1:
        return '#F3F7FF'
      case 2:
      case 0:
        return '#ECEEF1'
    }
  }

  const onClickAuthor = (record: any) => {
    authorDialogRef.value.open(record)
  }

  const onClickDay = (record: any) => {
    if (record.value === 0) return
    carorderDialogRef.value.open(record)
  }

  const dataSummaryKey = ['giveCarOrderNum', 'returnCarOrderNum', 'changeCarOrderNum']
  const dataSummaryTitle = ['交车单', '还车单', '换车单']
  const days = ref<any[]>([])
  const queryParam = ref({})

  const { reachBottom, loadData } = useList('/V5/driverScheduling/pageList', queryParam, (data: any) => {
    const result: any[] = []
    days.value = []
    columns = columns.slice(0, 3)

    data[0].everydayData?.forEach((item: any) => {
      days.value.push({
        title: item.dateStr,
        week: item.week,
        titleSlotName: 'titleSlot',
        dataIndex: item.dateStr,
        slotName: item.dateStr,
        align: 'center',
        width: '100px',
        nopadding: true,
      })
    })

    for (let i = 0; i < data.length; i++) {
      const everydayItem: any = {}
      const ordersTotal: string[] = []
      for (let j = 0; j < data[i].everydayData.length; j++) {
        everydayItem[data[i].everydayData[j].dateStr] = []
        for (let z = 0; z < 3; z++) {
          everydayItem[data[i].everydayData[j].dateStr].push({
            title: data[i].everydayData[j].dateStr + dataSummaryTitle[z],
            label: dataSummaryTitle[z],
            value: data[i].everydayData[j][dataSummaryKey[z]],
            changeCarOrderId: data[i].everydayData[j].changeCarOrderId,
            giveCarOrderId: data[i].everydayData[j].giveCarOrderId,
            returnCarOrderId: data[i].everydayData[j].returnCarOrderId,
          })
        }
      }
      for (let z = 0; z < 3; z++) {
        ordersTotal.push(`${dataSummaryTitle[z]} - ${data[i][dataSummaryKey[z]]}`)
      }
      result.push({
        ...data[i],
        // 工单总数
        ordersTotal,
        ...everydayItem,
      })
    }

    columns = [...columns, ...days.value]
    tableData.value = result
  })

  const onScrollBottom = () => {
    reachBottom()
  }

  const tableBoxHeight = ref(0)
  const containerHeight = ref(0)
  const getTableBoxHeight = () => {
    const system = uni.getSystemInfoSync()
    const { windowWidth } = system
    console.log('portrait tableBoxHeight', system)
    tableBoxHeight.value = windowWidth - 47 - 30
    containerHeight.value = windowWidth - 47 - 15
  }

  const onClickScreen = () => {
    uni.navigateBack()
  }

  onLoad((options: any) => {
    queryParam.value = JSON.parse(options.queryParam)
  })

  onMounted(() => {
    loadData()
  })

  onShow(() => {
    uni.showLoading({
      title: '加载中...',
    })
    setTimeout(() => {
      // #ifdef APP-PLUS
      plus.navigator.setFullscreen(true)
      plus.screen.lockOrientation('landscape')
      // #endif

      getTableBoxHeight()
      uni.hideLoading()
    }, 1200)
  })

  onUnload(() => {
    // #ifdef APP-PLUS
    plus.navigator.setFullscreen(false)
    plus.screen.lockOrientation('portrait-primary')
    // #endif
  })
</script>

<style lang="less" scoped>
  .driver-container {
    position: relative;
    width: 100%;
    background-color: #f7f8fa;
    overflow: hidden;
  }

  .site-info-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    word-break: normal;
  }
  .site-info-tag {
    padding: 2px 8px;
    border: 1px solid #3072f6;
    border-radius: 2px 2px 2px 2px;
    background-color: #e0edff;
    color: #3072f6;
  }
  .day-item {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .day-number,
  .gray-bg {
    color: #1890ff;
  }
  .gray-bg {
    color: #c7c7c7;
  }
  .blue-bg {
    background: #2a64f6;
    color: #fff;
    border-bottom-color: #2a64f6;
  }
  .gray {
    color: #86909c;
  }

  :deep(.table-th) {
    background-color: #f4f4f4;
  }

  :deep(.table-th:first-child),
  :deep(.table-td:first-child) {
    position: sticky;
    left: -1px;
    z-index: 1;
    background-color: #f4f4f4;
  }

  :deep(.table-th:first-child) {
    z-index: 2;
  }

  .table-box {
    .column-item {
      padding: 8px 10px;
    }
  }

  .table-padding-box {
    width: 100%;

    .table-order-item {
      text-align: center;
      padding: 5px 0;
    }

    .table--line {
      border-bottom: 1px #ebeef5 solid;
      &:last-child {
        border-bottom: none;
      }
    }
  }

  .float-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .navbar-title {
    font-size: 17px;
  }

  .tag {
    min-width: 55px;
    height: 25px;
    font-weight: 400;
    font-size: 12px;
    color: #165dff;
    padding: 2px 6px;
  }

  :deep(.uni-navbar--border) {
    border-bottom: 1px solid #ebeef5 !important;
  }
  :deep(.uni-nav-bar-text) {
    font-size: 16px;
  }
</style>
